<template>

    <div class="image-dialog">
        <div class="image-dialog-trigger">
            <div class="input-wrapper">
                <div class="input">
                    <i class="iconfont icon-return" @click="turnBack"> <img src="../assets/img/u207.png" alt=""></i>
                    <i class="iconfont icon-party"><img src="../assets/img/u185.png" alt=""></i>
                    <span class="placeholder">{{theme}}</span>
                </div>
            </div>
        </div>
        <div class="content">
            <p class="title">{{theme}}</p>
            <p class="time">{{activityDateFormat}}</p>
            <img :src="attachments" alt="" style="width: 100%;height: 3.88rem">
            <div class="detail" v-html="detail"></div>
            <div class="footer">
                <span>阅读{{browseCount}}</span>
                <span @click="praise" style="display: flex;align-items: center"><span class="icon" style="display: flex"><img :src="flag?icon:icon1" alt="" style="height: 0.4rem"></span><span style="display: flex;align-items: center">{{praiseCount}}</span></span>
            </div>
        </div>

    </div>
</template>

<script>
    import BASE_URL from '@/api/url'

    export default {
        name: "Details",
        data() {
            return {
                detail: '',
                theme: '',
                activityDateFormat: '',
                attachments: '',
                //点赞数
                praiseCount: 0,
                //浏览量
                browseCount: 0,
                flag: true,
                icon: require('../assets/img/like.png'),
                icon1: require('../assets/img/likeRed.png'),
            }
        },
        created() {
            this.fetchData()
        },
        mounted() {
            this.$PATCH(`/public/info/browse/${this.$route.query.pageType}/${this.$route.query.id}`)
        },
        methods: {
            turnBack() {
                this.$router.go(-1)
            },
            praise() {
                if (this.flag) {
                    this.flag = !this.flag;
                    this.$PATCH(`/public/info/praise/${this.$route.query.pageType}/${this.$route.query.id}`).then(() => {
                        this.fetchData();
                    })
                }else{
                    this.flag = !this.flag;
                    this.$PATCH(`/public/info/dispraise/${this.$route.query.pageType}/${this.$route.query.id}`).then(() =>{
                        this.fetchData();
                    })
                }

            },
            fetchData() {
                this.$get(`/weixin/detail/${this.$route.query.pageType}/${this.$route.query.id}`).then(data => {

                    this.detail = data.data.detail;
                    this.theme = data.data.theme;
                    this.attachments = `${BASE_URL}/${data.data.attachments}`;
                    this.activityDateFormat = data.data.activityDateFormat;
                    this.praiseCount = data.data.praiseCount === null ? 0 : data.data.praiseCount;
                    this.browseCount = data.data.browseCount === null ? 0 : data.data.browseCount;
                    document.title = data.data.theme;
                })
            }
        }
    }
</script>

<style lang='less' scoped>
    .content {
        height: calc(100vh - 1.5rem);
        overflow-y: scroll;
    }

    .image-dialog {
        font-family: 'PingFangSC-Light, "PingFang SC Light", "PingFang SC"';
        width: 100%;
        .content {
            padding: 0 0.6rem;
        }
        .placeholder {
            color: #fff;
            margin-left: 0.14rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: calc(100vw - 2rem);
            font-size: 0.28rem;
        }
        .title {
            font-size: 0.4rem;
            font-weight: 200;
            color: rgb(30, 30, 30);
            /*text-align: center;*/
            text-rendering: optimizeLegibility;
            margin-top: 0.84rem;

        }
        .time {

            font-size: 0.24rem;
            color: rgb(181, 181, 181);
            margin-top: 0.6rem;
        }
        .detail {
            margin-top: 0.9rem;
            font-size: 0.34rem;
            img {
                height: 3.88rem;
            }
        }
        .input-wrapper {
            background: linear-gradient(135deg, rgba(240, 83, 82, 1) 0%, rgba(240, 83, 82, 1) 0%, rgba(215, 36, 8, 1) 100%, rgba(215, 36, 8, 1) 100%);;
            box-sizing: border-box;
            height: 1rem;
            display: inline-flex;
            justify-content: center;
            width: 100vw;
            .input {
                border: none;
                outline: none;
                font-size: 15px;
                border-radius: 5px;
                min-height: 7vw;
                background: linear-gradient(135deg, rgba(240, 83, 82, 1) 0%, rgba(240, 83, 82, 1) 0%, rgba(215, 36, 8, 1) 100%, rgba(215, 36, 8, 1) 100%);
                display: flex;
                align-items: center;
                flex: 1;
                transition: width 3s;
                input {
                    border: none;
                    outline: none;
                    /*padding: 5px;*/
                    font-size: 15px;
                    border-radius: 5px;
                    padding-left: 0;
                    flex: 1;

                }
                .icon-party {
                    img {
                        width: 0.5rem;
                        height: 0.5rem;
                        margin-left: 0.16rem;
                    }

                }
                .icon-search {
                    img {
                        width: 0.38rem;
                        height: 0.38rem;
                        margin-right: 0.36rem;
                    }
                }

            }
        }

    }

    .footer {
        display: flex;
        padding: 0.2rem 0;
        font-size: 0.2rem;
        justify-content: space-between;
        align-items:center;
    }
</style>